@range: range(4);
.box {
    display: flex;
    width: 800px;
    height: 450px;
    margin: 100px auto 0 auto;
    perspective: 3200px;
    transform-style: preserve-3d;
}
.carousel {
    position: relative;
    width: 200px;
    height: 100%;
    transform-style: preserve-3d;
    // transition: all .8s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
    // transition: all .6s ease-out 0s;
    // &:hover {
    //     transform: rotateX(-360deg);
    // }
    each(@range, {
        &:nth-of-type(@{value}) {
            transition: all .8s ease-in-out ((@value - 1) * 0.15s);
            div.carousel-item {
                background-position:(-(@value - 1) * 200px) 0;
            }
        }
    });
    .carousel-item {
        position: absolute;
        width: 100%;
        height: 100%;
        &:nth-of-type(1) {
            transform: translateZ(225px);
            background: url(../image/1.jfif) no-repeat;
            background-size: cover;
        }
        &:nth-of-type(2) {
            transform: translateY(-225px) rotateX(90deg);
            background: url(../image/2.jfif) no-repeat;
            background-size: cover;
        }
        &:nth-of-type(3) {
            transform: translateZ(-225px) rotateX(180deg);
            background: url(../image/3.jfif) no-repeat;
            background-size: cover;
        }
        &:nth-of-type(4) {
            transform: translateY(225px) rotateX(-90deg);
            background: url(../image/4.jfif) no-repeat;
            background-size: cover;
        }
    }
    
}
.next {
    width: 80px;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
}